<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #container{
            width: 400px;
            height: 250px;
            margin: 0 auto;
            border: 3px solid #f00;
        }

        #box{
            width: 400px;
            height: 250px;
        }

        #box img{
            width: 400px;
            height: 250px;
        }

    </style>

    <script src="./jquery-3.3.1.min.js"></script>

</head>
<body>

    <h1>JQ动画效果</h1>
    <hr>

    <center>
        <button id="hideBtn">隐藏</button>
        <button id="showBtn">显示</button>
        <button id="toggleBtn">切换</button>
        <button id="fadeBtn">指定透明度</button>

        <button id="animateBtn">自定义动画</button>
        <button id="stopBtn">停止</button>
        <button id="delayBtn">延迟</button>

    </center>

    <br>

    <div id="container">
        <div id="box">
            <img src="./imgs/6.jpg">

        </div>
    </div>

    <script>
        //隐藏
            $('#hideBtn').click(function(){
            $('#box').hide(); // 秒隐藏
            // $('#box').hide('fast');
            // $('#box').hide('slow');
            // $('#box').hide(5000);// 隐藏: 高/宽/透明度
            // $('#box').slideUp(5000);// 上滑动: 高减到0
            // $('#box').fadeOut(5000);// 淡出: 透明度减到0
        });

        // 显示
        $('#showBtn').click(function(){
            $('#box').show();// 秒显示
            // $('#box').show(5000);// 显示: 高/宽/透明度
            // $('#box').slideDown(5000);// 下滑动: 高减增加
            // $('#box').fadeIn(5000);// 淡入: 透明度增加
        });

        // 显示/隐藏 切换
        $('#toggleBtn').click(function(){
            $('#box').toggle(1000);// 高/宽/透明度
            // $('#box').toggle(2500);// 高/宽/透明度
            // $('#box').slideToggle(2500);// 上下滑动: 高减增加
            // $('#box').fadeToggle(1000);// 淡入/出: 透明度增加
        });

        
        // 指定透明度
        $('#fadeBtn').click(function(){
            $('#box').fadeTo(3000, 0.1);
        });


        // 自定义动画
        $('#animateBtn').click(function(){
            $('#box img').animate({
                // 'width': '10px'
                // 'width': 'toggle'
                'width': '1200px',
                'height' : '600px'
            }, 3000);
        });

        // 停止
        $('#stopBtn').click(function(){
            $('#box img').stop();
        });

        // 延迟 / 延时
        $('#delayBtn').click(function(){
            $('#box').hide(1000).delay(3000).show(1000);
        });



    </script>



</body>
</html>



